<template>
	<view class="content">
		<Loading :show="loading"></Loading>
		<view  :style="{'opacity':!loading?'1':'0'}"  > 
		<u-toast ref="uToast" />
		<view class="content-top" @click="appletLogin">
			<view class="content-top-left">
				<!-- {{imgUrl(`/images/company/loginicon.png`)}} -->
				<!-- <view style="background: white;border-radius: 100%;"> -->
				<image style="width:130rpx;border-radius:100%;background: white;height: 130rpx;"  :src="userInfo.hasOwnProperty('avatarUrl')? userInfo.avatarUrl:imgUrl(`/images/company/loginicon.png`)">

					<!-- <u-image width="130rpx" mode="widthFix" :shape="'circle'" style="background: white;"  bg-color="white" :src="imgUrl(`/images/company/loginicon.png`)"></u-image> -->
					<!-- </view> -->

			</view>
			<view class="content-top-right">
				{{userInfo.hasOwnProperty('nickName')?userInfo.nickName:'点击注册/登录'}}
			</view>
			<view class="loginOut-icon" v-show="userInfo.hasOwnProperty('nickName')" v-on:click="show=true">
				<image style="width:50rpx;" mode="widthFix" :src="imgUrl(`/images/company/login-out.png`)">

			</view>
			<!-- <button  class="wxButton"  bindtap="getUserProfile" > 获取头像昵称 </button> -->
		</view>

		<view class="content-dh">
			<view class="content-dh-part" @click="go('./Focus')">
				<view class="content-dh-part-left">
					<image style="width: 40rpx;" mode="widthFix" :src="imgUrl(`/images/company/attention.png`)"></image>
				</view>

				<view class="content-dh-part-right">
					<text>我的关注</text>

					<u-icon class="icon" name="arrow-right" color="#d4d4d4"></u-icon>
				</view>

			</view>
			<navigator class="content-dh-part" url="./History">
				<view class="content-dh-part-left">
					<image style="width: 40rpx;" mode="widthFix" :src="imgUrl(`/images/company/history.png`)"></image>
				</view>

				<view class="content-dh-part-right">
					<text>浏览历史</text>

					<u-icon class="icon" name="arrow-right" color="#d4d4d4"></u-icon>
				</view>

			</navigator>
			<view class="content-dh-part" @click="go('./MySubscribe')">
				<view class="content-dh-part-left">
					<image style="width: 40rpx;" mode="widthFix" :src="imgUrl(`/images/company/lease.png`)"></image>
				</view>

				<view class="content-dh-part-right">
					<text>我的预约</text>

					<u-icon class="icon" name="arrow-right" color="#d4d4d4"></u-icon>
				</view>

			</view>
			<view class="content-dh-part" @click="go('./MySchedule')" >
				<view class="content-dh-part-left">
					<image style="width: 40rpx;" mode="widthFix" :src="imgUrl(`/images/company/house.png`)"></image>
				</view>

				<view class="content-dh-part-right">
					<text>发布进度</text>

					<u-icon class="icon" name="arrow-right" color="#d4d4d4"></u-icon>
				</view>

			</view>
		</view>
      <u-modal v-model="show" :content="content" show-cancel-button	@confirm="loginOut()"></u-modal>
		<!-- <u-popup mode="center" v-model="show" border-radius="10">
			<view class="content-popup">
				确定要退出登录吗
				<view class="confrim-btn">
					<u-button type="error" plain @click="loginOut()" size="mini" style="width: 50rpx;">确定</u-button>
					<u-button @click="show = false;" size="mini">取消</u-button>
				</view>
			</view>
		</u-popup> -->
		
		</view>
	</view>
</template>
<script>
	import {
		loginOperation,
		loginOut,
		checkToken
	} from "@/services/user.js"
	import {
		getUserInfo
	} from "@/utils/storageSync.js"
	import {
		mapMutations,
		mapState
	} from "vuex";
	import Loading from "@/components/loading/loading.vue"

	export default {
		components:{
			Loading
		},
		data() {
			return {
				content:'确定要退出登录吗',
				userInfo: {
					// nickName:"",
					// avatarUrl:""
				},
				loading:true,
				show: false,
			};
		},
	   
		 async onShow(){
			this.loadUserInfo()
			if(this.userInfo.hasOwnProperty('nickName') && this.userInfo.hasOwnProperty('avatarUrl')){
			  let res =   await checkToken()	
			  if(res.code == 100){
				  this.removeUserToken()
				  this.loadUserInfo()
				  uni.showToast({
				  	title: res.message,
				  	icon: 'none',
				  	duration: 1500,
				  });
			  }
			}
			// #ifdef MP-TOUTIAO
			await this.jscodeGet()
			// #endif
			// setTimeout(()=>{
			// this.loading = false
			// },300)
		},
		created(){
			this.loading = true
			setTimeout(()=>{
				this.$nextTick(()=>{
					this.loading = false
				})
			},1000) 
			
		},
		computed: {
			...mapState("user", ["token"]),

		},
		methods: {
			...mapMutations("user", ["setUserToken", "removeUserToken","historyAddUser"]),
			async appletLogin() {
				if (!this.userInfo.hasOwnProperty('nickName')) {
					const {
						loginApplet,
						$refs,
						setUserInfo,
						jscodeGet,
						setUserToken,
						loadUserInfo,
						historyAddUser
					} = this
					// #ifdef MP-WEIXIN
					uni.getUserProfile({
						desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
						success: async (res) => {
							uni.showLoading({
								title: '登录中'
							});
							let js_code = await loginApplet() //小程序登录
							if (js_code) {
								let loginRes = await loginOperation({
									formData: res.userInfo,
									js_code: js_code
								}) //后台登录
								if (loginRes.code == 200) {
									setUserToken(loginRes.data.token)
									setUserInfo(res.userInfo)
									loadUserInfo()
									$refs.uToast.show({
										title: '登录成功',
										position: 'top',
										type: 'success',
									})
									historyAddUser()
								} else {
									$refs.uToast.show({
										title: '服务器错误',
										type: 'error',
									}) //登录失败
								}

							} else {
								$refs.uToast.show({
									title: '登录失败',
									type: 'error',
								}) //登录失败
							}
							uni.hideLoading();
						}
					})
					// #endif	
					// #ifdef MP-TOUTIAO
					tt.getUserProfile({
						success: async (res) => {
							uni.showLoading({
								title: '登录中'
							});
							let js_code = await jscodeGet()
							if (js_code) {
								let loginRes = await loginOperation({
									formData: res.userInfo,
									js_code: js_code
								}) //后台登录
								if (loginRes.code == 200) {
									setUserToken(loginRes.data.token)
									console.log(this.token)
									setUserInfo(res.userInfo)
									loadUserInfo()
									$refs.uToast.show({
										title: '登录成功',
										position: 'top',
										type: 'success',
									})
									historyAddUser()
								} else {
									$refs.uToast.show({
										title: '服务器错误',
										type: 'error',
									}) //登录失败
								}
							}
							uni.hideLoading();
						},
						fail(error) {
							// $refs.uToast.show({
							// 	title: '登录异常,请重新登录',
							// 	type: 'warning',
							// }) //登录失败
							jscodeGet()
						}
					});

					// #endif	
				}

			},
			loginOut() {
				this.show = false
				loginOut()
				this.removeUserToken()
				this.loadUserInfo()
				this.$refs.uToast.show({
					title: '退出成功',
					position: 'top',
					type: 'success',
				})
			},
			//获取用户信息
			 loadUserInfo() {
				let userInfo = getUserInfo()
				this.userInfo = userInfo && this.token ? userInfo : {}
			},
			go(url){
				let userInfo = getUserInfo()
				if(userInfo && this.token){
					uni.navigateTo({
						url:url
					})
				}else{
					uni.showToast({
						title: '请先登录',
						icon: 'none',
					});
				}
				
			},
			// historyAdd
			
			
			//获取小程序登录code 
			async jscodeGet() {
				let js_code = await this.loginApplet()
				if (js_code) {
					return js_code
				} else {
					this.$refs.uToast.show({
						title: '加载失败',
						type: 'error',
					}) //登录失败
					return false
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.content {
		width: 100%;
		display: flex;
		flex-direction: column;

		.content-popup {
			padding: 24rpx;
			font-size: 30rpx;
			// border-radius: 20rpx;
			width: 350rpx;
			// margin-top: 50rpx;
			text-align: center;

			.confrim-btn {
				display: flex;
				margin-top: 30rpx;
				justify-content: space-around;
			}
		}

		.content-top {
			width: 100%;
			height: 230rpx;
			background: #538aff;
			position: relative;
			display: flex;

			.loginOut-icon {
				position: absolute;
				right: 30rpx;
				top: 20rpx;
			}

			.content-top-left {
				width: 200rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.wxButton {
				position: absolute;
				width: 100%;
				height: 100%;
				opacity: 0;
			}

			.content-top-right {
				flex: 1;
				// width: 50%;
				margin-top: 75rpx;
				color: white;
				font-size: 45rpx;
				 white-space: nowrap;
				    overflow: hidden;
				    text-overflow: ellipsis;
					padding-right: 30rpx;
				// overflow: hidden;
				// text-overflow: ellipsis;
				// display: -webkit-box;
				// -webkit-line-clamp: 2;
				// -webkit-box-orient: vertical;
			}

		}

		.content-dh {
			width: 100%;
			display: flex;
			flex-direction: column;

			.content-dh-part {
				display: flex;
				// height: 80rpx;
				// border: 1rpx solid red;
				width: 100%;
				align-items: center;
			}

			.content-dh-part-left {
				width: 100rpx;
				display: flex;
				justify-content: flex-end;
			}

			.content-dh-part-right {
				display: flex;
				justify-content: space-between;
				flex: 1;
				padding: 40rpx 20rpx 40rpx 0;
				margin-left: 20rpx;
				border-bottom: 1rpx solid #eeeeee;
				font-size: 32rpx;
				font-weight: 540;
				color: #5e5e5e;

				.icon {
					margin-right: 20rpx;
				}
			}


		}
	}
	.showClass{
		opacity: 0;
	}
</style>
